<template>
  <el-dialog
    :before-close="handleClose"
    :visible.sync="previewVisible"
    append-to-body
    title="导出预览"
  >
    <div id="excel_preview" class="excelPreview">
      <span style="color: #303133;font-size: 14px;font-weight: 500">血液颜色</span>
      <el-form ref="topicForm" :model="topic" label-width="auto" size="mini" style="margin-top: 10px;margin-left: 10px">
        <el-row :span="24">
          <el-col :span="12">
            <el-form-item label="课题编号" prop="topicCode">
              <div>{{ topic.topicCode }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课题名称" prop="topicName">
              <div>{{ topic.topicName }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :span="24">
          <el-col :span="12">
            <el-form-item label="课题来源" prop="topicSource">
              <div>{{ topic.topicSource }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="研究目的" prop="researchPurposes">
              <div>{{ topic.researchPurposes }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :span="24">
          <el-col :span="12">
            <el-form-item label="研究方法" prop="researchMethod">
              <div>{{ topic.researchMethod }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预期结果" prop="expectedResult">
              <div>{{ topic.expectedResult }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :span="24">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <div>{{ topic.startTime }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <div>{{ topic.endTime }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="topic.formKey" style="margin-top: 20px">
        <span style="color: #303133;font-size: 14px;font-weight: 500">临床报告CRF表</span>
        <el-form size="mini" style="margin-top: 10px;margin-left: 10px">
          <el-col v-for="(item,index) in descList" :key="index" :span="12">
            <el-form-item :label="item.label">
              <div>{{ item.value }}</div>
              <!--              <div v-if="item.value.length < 15">{{item.value}}</div>-->
              <!--              <div v-else>{{item.value.substring(0,15)}}...</div>-->
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handlePreview">下 载</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Parser from 'form-gen-parser'
import print from '@/utils/print'

export default {
  name: 'TopicTask',
  components: {
    Parser
  },
  props: {
    previewVisible: Boolean,
    topic: Object,
    customForm: Object
  },
  data() {
    return {
      descList: []
    }
  },
  created() {
  },
  methods: {
    //组件数据处理展示
    customFormJson() {
      let countList = []
      //处理多层，含有children
      let newCustomForm = _.cloneDeep(this.customForm.formJson[0].json.fields)
      let newCustomForms = []
      newCustomForm.forEach(item => {
        newCustomForms.push(item)
        if (!item.__vModel__) {
          if (item.__config__.children) {
            item.__config__.children.forEach(items => {
              newCustomForms.push(items)
            })
          }
        }
      })
      newCustomForms = _.filter(newCustomForms, function(o) {
        return o.__vModel__
      })
      newCustomForms.forEach(item => {
        if (item.__vModel__) {
          //input框,单日期处理,滑块
          if (item.__config__.tag == 'el-input' || item.__config__.tag == 'el-input-number'
            || item.__config__.tagIcon == 'date' || item.__config__.tagIcon == 'time'
            || item.__config__.tag == 'el-slider' || item.__config__.tag == 'el-rate') {
            countList.push({
              label: item.__config__.label,
              value: item.__config__.defaultValue,
              key: item.__vModel__
            })
          }
          //select处理 el-switch
          else if (item.__config__.tag == 'el-select' || item.__config__.tag == 'el-radio-group') {
            let arr = item.__slot__.options
            //判断el-select单选或者多选
            if (arr.length > 0 && !Array.isArray(item.__config__.defaultValue)) {
              arr.forEach(items => {
                if (items.value == item.__config__.defaultValue) {
                  countList.push({
                    label: item.__config__.label,
                    value: items.label,
                    key: item.__vModel__
                  })
                }
              })
            } else if (arr.length > 0 && Array.isArray(item.__config__.defaultValue)) {
              let arr = item.__slot__.options
              if (item.__config__.defaultValue.length > 0) {
                let brr = ''
                arr.forEach(items => {
                  if (item.__config__.defaultValue.includes(items.value)) {
                    brr += items.label + ' '
                  }
                })
                countList.push({
                  label: item.__config__.label,
                  value: brr,
                  key: item.__vModel__
                })
              }
            } else {
            }
          }
          //多选处理
          else if (item.__config__.tag == 'el-checkbox-group') {
            let arr = item.__slot__.options
            if (item.__config__.defaultValue.length > 0) {
              let brr = ''
              arr.forEach(items => {
                if (item.__config__.defaultValue.includes(items.value)) {
                  brr += items.label + ' '
                }
              })
              countList.push({
                label: item.__config__.label,
                value: brr,
                key: item.__vModel__
              })
            } else {
              countList.push({
                label: item.__config__.label,
                value: '',
                key: item.__vModel__
              })
            }
          }
          //rangePick时间选择
          else if (item.__config__.tagIcon == 'time-range' || item.__config__.tagIcon == 'date-range') {
            if (item.__config__.defaultValue.length > 0) {
              countList.push({
                label: item.__config__.label,
                value: item.__config__.defaultValue[0] + '~' + item.__config__.defaultValue[1],
                key: item.__vModel__
              })
            }
          }
          //el-switch
          else if (item.__config__.tag == 'el-switch') {
            if (item.__config__.defaultValue) {
              countList.push({
                label: item.__config__.label,
                value: item['active-value'],
                key: item.__vModel__
              })
            } else {
              countList.push({
                label: item.__config__.label,
                value: item['inactive-value'],
                key: item.__vModel__
              })
            }
          } else {
          }
        }
      })
      this.descList = countList
    },

    //下载pdf
    handlePreview() {
      print.downloadPDF(document.querySelector('#excel_preview'), '课题任务PDF')
    },
    //关闭弹窗
    handleClose() {
      this.$emit('closePreview')
    }
  },
  watch: {
    previewVisible: {
      handler(newV) {
        if (newV) {
          this.customFormJson()
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style scoped>
.excelPreview {
  margin-bottom: 40px;
  height: 600px;
}
</style>
